﻿<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Space Hook</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<link rel="stylesheet" type="text/css" href="jq.ui.css" />

<style>
    
	.jqmScrollbar {background:black !important;z-index:999}	
	
</style>
<!-- uncomment for AppMobi apps
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 	
-->


<script type="text/javascript" charset="utf-8" src="../../ui/jq.ui.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="../../plugins/jq.carousel.js"></script> 
<!-- include touch.js on desktop browsers only -->


<script>
if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
var script=document.createElement("script");
script.src="../../touch.js";
var tag=$("head").append(script);
$.os.android=true; //let's make it run like an android device
$.os.desktop=true;
}
</script>






<script type="text/javascript">
    /* This function runs once the page is loaded, but appMobi is not yet active */
	var webRoot="./";
	$.ui.backButtonText="Back";  
    $.ui.loadDefaultHash=false;
	
    /* This code prevents users from dragging the page */
    var preventDefaultScroll = function(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    };
	
	document.addEventListener('touchmove', preventDefaultScroll, false);

    /* This code is used to run as soon as appMobi activates */
    var onDeviceReady=function(){
		AppMobi.device.setRotateOrientation("portrait");
        AppMobi.device.setAutoRotate(false);
		webRoot=AppMobi.webRoot+"kitchensink/";
	    //hide splash screen
	    AppMobi.device.hideSplashScreen();	
		
    };
    document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
</script>

</head>
<body>
<div id="jQUi">
<div id="header">
<div style="padding-left:10px;top:12px;position:relative;"><a href="javascript:;" onclick="$.ui.toggleSideMenu()"><img src="images/menu.png"></a></div>
</div>

<div id="content">
	<div title='Spaceline' id="main" class="panel" selected="true" data-footer="none">
    <ul>
       <li><a href='#profile'><img src="images/logo.jpg" width=48 align='left' style='margin-right:5px'> <span style="position:relative;top:-20px"> - Look at this awesome post I made</span></a></li>
       <li><a href='#profile'><img src="images/logo.jpg" width=48 align='left' style='margin-right:5px'> <span style="position:relative;top:-20px">- Look at this awesome post I made</span></a></li>
       <li><a href='#profile'><img src="images/logo.jpg" width=48 align='left' style='margin-right:5px'> <span style="position:relative;top:-20px">- Look at this awesome post I made</span></a></li>
	</div> 
    <div id="profile" title="Spacefile" class="panel" data-footer="footer_profile">
        <div style="float:left;"><img src="images/logo.jpg" align="left"></div>
            <div style="float:left;margin-left:5px;margin-top:5px;">
            <div style="text-align:right;width:100px;float:left;">Name:</div><div style="float:left;font-size:1.2em;font-weight:bold;">Space Hook</div><br style="clear:both">
            <div style="text-align:right;width:100px;float:left">Status:</div> <div style="float:left;font-size:1.2em;font-weight:bold;">Single</div><br style="clear:both">
           <div style="text-align:right;width:100px;float:left;">Home Location:</div><div style="float:left;font-size:1.2em;font-weight:bold;">From Mars</div>
        </div>
    </div>
    <div id="photos" title="Photos" class="panel" data-footer="footer_profile">
      <style>
		.carousel_paging {
			border-radius: 10px;
			
			background: #AAE;
			width: 10px;
			height: 10px;
			float: left;
		}

		.carousel_paging_selected {
			border-radius: 10px;
			
			background: #fff;
			width: 10px;
			height: 10px;
			float: left;
		}

		.spacer {
			width: 10px;
			float: left;
		}

		</style>
		<script>
		 var carousel;
			function init_carousel() {
				carousel=$("#carousel").carousel({
					pagingDiv: "carousel_dots",
					pagingCssName: "carousel_paging",
					pagingCssNameSelected: "carousel_paging_selected",
					preventDefaults:false
				});
			}
			window.addEventListener("load", init_carousel, false);
		
		</script>
			<div id="carousel_dots" style="center; clear: both; position: relative; top: 240px; z-index: 200; width: 250px; height: 25px;margin:auto;left:50px; ">
			</div>
			<div id="carousel" style="display:block;height:250px;width:250px;margin:auto">
					<div><img src="images/mars.jpg"></div>
                    <div><img src="images/mars.jpg"></div>
                    <div><img src="images/mars.jpg"></div>
                    <div><img src="images/mars.jpg"></div>
                    <div><img src="images/mars.jpg"></div>
			</div>
    </div>
    
    
    <div title='Space Friends' id="friends" class="panel"  data-footer="none">
    <ul>
       <li><a href='#profile'><img src="images/logo.jpg" width=48 align='left' style='margin-right:5px'> Me</a></li>
       <li><a href='#profile'><img src="images/logo.jpg" width=48 align='left' style='margin-right:5px'> Myself</a></li>
       <li><a href='#profile'><img src="images/logo.jpg" width=48 align='left' style='margin-right:5px'> Irene?</a></li>
       </ul>
	</div> 
    
     <div title='Space Games' id="games" class="panel" data-footer="none">
    <ul>
       <li><img src="images/applab.jpg" align="left" width=48 align='left' style='margin-right:5px'> App*Lab</li>
       <li><img src="images/applab.jpg" align="left" width=48 align='left' style='margin-right:5px'> Social Bingo</li>
       <li><img src="images/applab.jpg" align="left" width=48 align='left' style='margin-right:5px'> Blitz Bingo</li>
       </ul>
	</div> 

</div>



<!-- ------------------------------------------ -->
<!-- navbar -->

<div id="navbar">
</div>
 
<!-- ------------------------------------------ -->
<nav>
   <div class='title'>Search<br>
   <input type="text" class="jq-ui-forms"> <a href="javascript:;" style='width:30px' class="button">Go</a>
   </div>
   <ul>
      <li><a href="#main">Spaceline</a></li>
      <li><a href="#friends">Friends</a></li>
      <li><a href="#games">Games</a></li>
   </ul>
</nav>
<footer id="footer_profile">
    <a href="#profile" id='navbar_info' class='selected' >Profile</a>
    <a href="#photos" id='navbar_photos' >Photos</a>

</footer>
</div>
</body>
</html>
